<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element</title>
    <!--1. 导入css-->
    <link rel="stylesheet" href="./css/element-plus.css">
</head>
<body>
<div id="view">
    <el-button>{{message}}</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-icon>
        <ice-tea/>
    </el-icon>
    <el-form :model="form" label-width="120px">
        <el-form-item label="Activity name">
            <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai"/>
                <el-option label="Zone two" value="beijing"/>
            </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
            <el-col :span="11">
                <el-date-picker
                        v-model="form.date1"
                        type="date"
                        placeholder="Pick a date"
                        style="width: 100%"
                />
            </el-col>
            <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
                <el-time-picker
                        v-model="form.date2"
                        placeholder="Pick a time"
                        style="width: 100%"
                />
            </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery">
            <el-switch v-model="form.delivery"/>
        </el-form-item>
        <el-form-item label="Activity type">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="Online activities" name="type"/>
                <el-checkbox label="Promotion activities" name="type"/>
                <el-checkbox label="Offline activities" name="type"/>
                <el-checkbox label="Simple brand exposure" name="type"/>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources">
            <el-radio-group v-model="form.resource">
                <el-radio label="Sponsor"/>
                <el-radio label="Venue"/>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form">
            <el-input v-model="form.desc" type="textarea"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>
    <el-button @click="send()">send</el-button>

</div>
<!--2.引入vue.js-->
<script src="./js/vue.js"></script>
<!--3. 引入element-plus.js-->
<script src="./js/element-plus.js"></script>
<script src="./js/icons-vue.js"></script>

<script>

    // 4. 创建Vue实例
    const app = Vue.createApp({
        data() {
            return {
                message: "hello element",
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!')
            },
            send() {
                this.$messageBox.alert('This is a message', 'Title', {
                    // if you want to disable its autofocus
                    // autofocus: false,
                    confirmButtonText: 'OK',
                    callback: (action) => {
                        this.$message({
                            type: 'info',
                            message: `action: ${action}`,
                        })
                    },
                })
            }
        },
    })
    // 5. 使用组件库
    app.use(ElementPlus)
    // 注册图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    // 6. 挂载到页面
    app.mount("#view")
</script>
</body>
</html>